<template>
  <view class="goods-content" @tap="handleLookMore">
    <view class="goods-wrap" v-for="cate in goodsInfo" :key="cate.id">
      <view class="goods-wrap-title">
        <text>{{ cate.cate_name }}</text>
        <text class="more" v-if="cate.is_show_more" :data-cate="cate"
          >查看更多</text
        >
      </view>
      <view class="goods-main">
        <goodsCard
          v-for="item in cate.goods"
          @click="handleToDetail"
          :key="item.id"
          :info="item"
        />
      </view>
    </view>
    <view v-if="goodsInfo.length" class="goods-content-footer"
      >更多商品，敬请期待~</view
    >
    <view v-else class="default-image">
      <view :style="defaultImageStyle"></view>
      <view>商品正在路上，敬请期待~</view>
    </view>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import goodsCard from "./goods-card";
import { DEFAULT_IMAGE } from "@/libs/image-url";
export default {
  components: { goodsCard },
  props: {
    goodsInfo: { type: Array, default: () => [] }
  },
  computed: {
    defaultImageStyle() {
      return {
        "background-image": `url(${DEFAULT_IMAGE})`
      };
    }
  },
  methods: {
    handleToDetail(goods) {
      const { id, cate_id } = goods;
      Taro.navigateTo({
        url: `/pages/exchange-store/goods-detail/index?id=${id}&cate_id=${cate_id}`
      });
    },
    handleLookMore({ target: { dataset } }) {
      const { cate } = dataset;
      if (!cate) return;
      Taro.navigateTo({
        url: `/pages/exchange-store/more-goods/index?id=${cate.id}&title=${cate.cate_name}`
      });
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/tools.scss";
.goods-content {
  padding: 20px 30px 0;
  .goods-wrap {
    margin-bottom: 46px;
    &-title {
      @include normal-flex(left);
      width: 100%;
      height: 50px;
      margin-bottom: 32px;
      text {
        &:first-child {
          flex: 1;
          @include textEllipsis;
          @include base-text(50px, 36px, #303133);
        }
        &.more {
          @include base-text(34px, 24px, #c0c4cc, 400);
        }
      }
    }
    .goods-main {
      display: flex;
      flex-wrap: wrap;
      .goods-card {
        margin-bottom: 18px;
        &:nth-child(odd) {
          margin-right: 18px;
        }
      }
    }
  }
  &-footer {
    text-align: center;
    @include base-text(40px, 28px, #c0c4cc, 400);
  }
  .default-image {
    margin-top: 200px;
    view {
      text-align: center;
      &:first-child {
        margin: 0 auto;
        width: 374px;
        height: 200px;
        background-size: 100% 100%;
        margin-bottom: 30px;
      }
      &:last-child {
        @include base-text(40px, 28px, #909399, 400);
      }
    }
  }
}
</style>
